import { ProCard, ProFormInstance } from '@ant-design/pro-components';
import { useRef, useState } from 'react';
import { ProTableContext } from '../Context/ProTableContext';
import { initConfig } from '../ProTableDynamic/config';
import ProTableDynamicSettings from './Settings/setting';
import ProTableDynamic from '../ProTableDynamic';
import { EventInfo, EventTableType, ProTableInfo, ProTableContexteValue, ProFormInfo } from '../ProTableDynamic/utils/types';
import React from 'react';
import './index.less';

const ProTableDynamicShow = () => {
  // 全局数据源
  const [tableInfo, setTableInfo] = useState({} as ProTableInfo);
  const [formInfo, setFormInfo] = useState({} as ProFormInfo);
  const proTableContexteValue: ProTableContexteValue = {
    tableInfo,
    setTableInfo: (value: any) => setTableInfo(value),
    formInfo,
    setFormInfo: (value: any) => setFormInfo(value),
  };

  // 配置的事件
  const [eventInfo, setEventInfo] = useState<any>({});
  const onSettingEvent = React.useCallback((newEventInfo: EventInfo) => {
    // console.debug('操作事件监听', newEventInfo);
    setEventInfo(newEventInfo);
  }, []);
  const [eventTabelType, setEventTabelType] = useState<EventTableType>('');
  const onEventTabelType = React.useCallback((newEventTabelType: EventTableType) => {
    // console.debug('表格操作事件监听', newEventTabelType);
    setEventTabelType(newEventTabelType + Math.random());
  }, []);

  const [config, setConfig] = useState<any>(initConfig(() => onSettingEvent));

  // 更新配置
  const dynamicSetConfig = React.useCallback((newConfig: any) => {
    // console.debug('ProTableDynamicSettings更新config', newConfig);
    setConfig(() => ({ ...newConfig }));
  }, []);
  // console.debug('ProTableDynamicSettings');
  return (
    <>
      <ProTableContext.Provider value={proTableContexteValue}>
        <div style={{ display: 'flex', height: '100%', overflow: 'auto' }}>
          <div style={{ width: '70%', height: '100%', overflow: 'auto' }}>
            <ProTableDynamic dynamic={true} config={config} eventInfo={eventInfo} eventTableType={eventTabelType} />
          </div>
          <div style={{ width: '30%', minWidth: '400px', height: '100%', overflow: 'auto', background: '#fff', borderLeft: '1px solid #eeeeee' }}>
            <ProTableDynamicSettings onSettingEvent={onSettingEvent} onEventTabelType={onEventTabelType} dynamicSetConfig={dynamicSetConfig} />
          </div>
        </div>
      </ProTableContext.Provider>
    </>
  );
};

export default ProTableDynamicShow;
